<template>
  <div class="searchAdd">
    <header class="top">
      <span @click="back">返回</span>
      <span v-text="title"></span>
    </header>
    <div class="serchPosition">
      <input
        type="text"
        placeholder="输入学校、商务楼、地址"
        v-model="searchObj"
      />
      <button @click="btn">提交</button>
      <!-- 搜索结果 -->
      <ul class="resUl">
        <li v-for="(v, i) in resultArr" :key="i" @click="searchContent(v)">
          <p v-text="v.name" class="addressName"></p>
          <p v-text="v.address" class="address"></p>
        </li>
      </ul>
      <!-- 未搜到结果 -->
      <p v-if="resultArr.length == 0" class="noResult">
        很抱歉，未搜索到该地址
      </p>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "searchAdd",
  data() {
    return {
      title: "搜索",
      searchObj: "",
      resultArr: {},
    };
  },
  created() {
    console.log(this.citys);
  },
  methods: {
    back() {
      this.$router.back();
    },
    //搜索
    btn() {
      const api =
        this.eleUrl.search +
        "?city_id=" +
        this.citys.id +
        "&keyword=" +
        this.searchObj;
      this.$http({
        url: api,
        method: "get",
        data: {},
      }).then((res) => {
        this.resultArr = res.data;
        console.log(res.data);
      });
      //清空输入框
      this.searchObj = "";
    },
    // 搜索记录
    searchContent(content) {
      //将点击的信息存到state中
      this.$store.commit("getNewPosition", content);
      //点击跳转到订餐首页
      this.$router.push({
        name: "addAddress",
      });
    },
  },
  computed: {
    ...mapState(["eleUrl", "userLoginMsg", "citys"]),
  },
};
</script>

<style scoped>
.searchAdd {
  font-size: 0.15rem;
}
.top {
  height: 0.4rem;
  width: 100%;
  background-color: rgb(80, 143, 238);
}
.top > span {
  color: white;
  line-height: 0.4rem;
  margin-left: 0.2rem;
}
.top > span:nth-child(2) {
  margin-left: 1rem;
  font-weight: bold;
}
.serchPosition {
  border-bottom: 2px solid #ddd;
  border-top: 2px solid #ddd;
  background-color: #fff;
  width: 3.75rem;
  margin: 0 auto;
  margin-top: 0.1rem;
}
.serchPosition > input {
  height: 0.28rem;
  width: 80%;
  border-radius: 5px;
  outline: none;
  border: 1px solid gray;
  display: block;
  margin: 0.1rem auto;
  padding-left: 0.1rem;
}
.serchPosition > button {
  display: block;
  margin: 0.1rem auto;
  height: 0.3rem;
  width: 85%;
  color: white;
  border: none;
  border-radius: 5px;
  background-color: rgb(80, 143, 238);
}
/* 搜索结果 */
.resUl > li {
  padding: 0.1rem;
  border-top: 1px solid rgb(190, 187, 187);
}
.addressName {
  font-size: 0.18rem;
}
.address {
  font-size: 0.14rem;
  color: gray;
  margin-top: 0.1rem;
}
/* 未搜索到结果 */
.noResult {
  text-align: center;
  margin: 0.3rem;
}
</style>